<template>
  <div class="manage-wrapper">
    <CourseItem if="course" :key="course ? course.id : 0" :course="course" class="course" :template-type="2"></CourseItem>
    <div class="stu-content">
      <el-button-group class="tabs">
        <el-button @click="setStatus(1)" type="text" :class="{ 'selected': status === 1 }">课程成员</el-button>
        <el-badge :value="course?course.apply_number:''">
          <el-button @click="setStatus(3)" type="text" :class="{ 'selected': status === 3 }">等待验证</el-button>
        </el-badge>
      </el-button-group>
      <el-select v-model="sortvalue" placeholder="选择排序方式" @change="changeSort">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <table v-if="status === 1">
        <tr>
          <th>姓名</th>
          <th>班级</th>
          <th>学号</th>
          <th>班级管理</th>
          <th></th>
        </tr>
        <hr>
        <tr v-for="(item, index) in evenstudents" :key="index">
          <td>{{ item.real_name }}</td>
          <td>{{ item.class_name }}</td>
          <td>{{ item.student_number }}</td>
          <td>
            <el-button @click="remove(item)" type="button" size="mini">移出课程</el-button>
          </td>
          <td></td>
        </tr>
      </table>
      <table v-if="status === 3">
        <tr>
          <th>姓名</th>
          <th>学号</th>
          <th>班级</th>
          <th><el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox></th>
          <th><el-button @click="agree" type="button" size="mini">同意</el-button><el-button @click="refuse" type="button" size="mini">拒绝</el-button></th>
        </tr>
        <hr>
        <tr v-for="(item, index) in students" :key="index">
          <td>{{ item.real_name }}</td>
          <td>{{ item.student_number }}</td>
          <td>{{ item.class_name }}</td>
          <td>
            <el-checkbox v-model="item.active" @change="handleCheckedStudentsChange">选中</el-checkbox>
          </td>
          <td></td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
import CourseItem from './CourseItem'
import { getMyCourse, getStudents, manaCourse } from '@/utils/api'

export default {
  name: 'ManageStu',
  components: {
    CourseItem
  },
  props: {
    courseId: String
  },
  data () {
    return {
      students: [],
      evenstudents: [],
      status: 1,
      checkAll: false,

      options: [
        {
          value: '1',
          label: '按班级排序'
        },
        {
          value: '2',
          label: '按学号排序',
        },
        ],
      sortvalue: '1'
    }
  },
  computed: {
    course () {
      return this.$store.getters.getCourseById(parseInt(this.$route.params.courseId))
    }
  },
  methods: {
    async getMyCourse () {
      let res = await getMyCourse()
      if (res.error === '10') {
        this.$store.commit('setCourses', res.result)
      } else {
        this.$notify({
          title: '获取课程出错',
          message: res.result,
          type: 'error'
        })
      }
    },
    async getStudents () {
      let res = await getStudents({course_id: this.courseId, status: this.status})
      if (res.error === '10') {
        this.students = res.result
        this.evenstudents=this.students.sort(function (object1,object2) {
          if (object1.class_name == null)
          {
            return 1
          }
          else if(object2.class_name == null)
          {
            return -1
          }
          else if (object1.class_name > object2.class_name)
          {
            return 1
          }
          else if (object1.class_name < object2.class_name)
          {
            return -1
          }
          else
          {
            return 0
          }
        })
      } else {
        this.$notify({
          title: '获取课程成员出错',
          message: res.result,
          type: 'error'
        })
      }
    },
    async agree () {
      let res = await manaCourse({ account_id: this.getActiveStudent(), course_id: this.course.id, status: '1' })
      if (res.error === '10') {
        this.$notify({
          title: '已通过',
          type: 'success'
        })
        this.$router.go(0)
      } else {
        this.$notify({
          title: '通过失败',
          message: res.result,
          type: 'error'
        })
      }
    },
    async refuse () {
      let res = await manaCourse({ account_id: this.getActiveStudent(), course_id: this.course.id, status: '0' })
      if (res.error === '10') {
        this.$notify({
          title: '已经拒绝',
          type: 'success'
        })
        this.$router.go(0)
      } else {
        this.$notify({
          title: '拒绝失败',
          message: res.result,
          type: 'error'
        })
      }
    },
    async remove (item) {
      let res = await manaCourse({ account_id: [item.account_id], course_id: this.course.id, status: '4' })
      if (res.error === '10') {
        this.$notify({
          title: '成功移除',
          type: 'success'
        })
        this.$router.go(0)
      } else {
        this.$notify({
          title: '移除失败',
          message: res.result,
          type: 'error'
        })
      }
    },
    setStatus (status) {
      this.status = status
      this.getStudents()
    },
    handleCheckAllChange () {
      if (this.checkAll) {
        this.students.map((item) => { item.active = true })
      } else {
        this.students.map((item) => { item.active = false })
      }
    },
    handleCheckedStudentsChange () {
      let checkedCount = 0
      this.students.map((item) => { if (item.active) { checkedCount++ } })
      this.checkAll = checkedCount === this.students.length
    },
    getActiveStudent () {
      let arr = []
      this.students.map((item) => { if (item.active) { arr.push(item.account_id) } })
      return arr
    },
    changeSort(){
      if (this.sortvalue == '1')
      {
        this.evenstudents=this.students.sort(function (object1,object2) {
          if (object1.class_name > object2.class_name)
          {
            return 1
          }
          else if (object1.class_name < object2.class_name)
          {
            return -1
          }
          else
          {
            return 0
          }
        })
      }
      else if(this.sortvalue == '2')
      {
        this.evenstudents=this.students.sort(function (object1,object2) {
          if (parseInt(object1.student_number) > parseInt(object2.student_number))
          {
            return 1
          }
          else if (parseInt(object1.student_number) < parseInt(object2.student_number))
          {
            return -1
          }
          else
          {
            return 0
          }
        })
      }
      else
      {
        this.evenstudents=this.students
      }
    }
  },
  mounted () {
    if (!this.course) {
      this.getMyCourse()
    }
    this.getStudents()
  }
}
</script>
<style lang="less">
.manage-wrapper {
  width: 60%;
  margin: 0 auto;
  min-height: 600px;
  .course {
    margin-left: -30px;
  }
  .stu-content {
    margin: 60px 0 0 30px;
    button {
      padding: 5px 10px;
      color: #000;
    }
    button.selected {
      color: #25a2cb;
    }
    .tabs>button:first-child {
      border-right: 1px solid #bbb;
    }
  }
  table {
    width: 100%;
    tr {
      display: flex;
      padding-left: 60px;
      justify-content: space-around;
      height: 30px;
    }
    tr:first-child {
      margin: 20px 0 7px 0;
    }
    hr {
      margin-left: -60px;
      margin-bottom: 7px;
    }
    th, td {
      flex: 1;
      text-align: center;
    }
    td:last-child {
      cursor: pointer;
    }
  }
}
</style>
